<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>%VITE_TITLE%</title>
  </head>
  <body>
    <noscript
      ><p>
        请启用浏览器的JavaScript<br />Please turn on your JavaScript
      </p></noscript
    >
    <div id="splash">
      <p class="splash-title">正在加载系统</p>
        <svg
        class="splash-loading"
          stroke="currentColor"
          fill="none"
          stroke-width="2"
          viewBox="0 0 24 24"
          stroke-linecap="round"
          stroke-linejoin="round"
          height="40"
          width="40"
          class="animate-spin"
          xmlns="http://www.w3.org/2000/svg"
        >
          <line x1="12" y1="2" x2="12" y2="6"></line>
          <line x1="12" y1="18" x2="12" y2="22"></line>
          <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
          <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
          <line x1="2" y1="12" x2="6" y2="12"></line>
          <line x1="18" y1="12" x2="22" y2="12"></line>
          <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
          <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
        </svg>
    </div>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>

  <style>
    #splash {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #333131;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 35px;
      user-select: none;
    }
    .splash-title{
      letter-spacing: 12px;
      font-size: 28px;
      color: white;
    }
    .splash-loading{
      color: white;
      /* 加入旋转动画 */
      animation: spin 1s linear infinite;
    }

    /* 旋转动画 */
    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  </style>
</html>
